<template>
  <div class="earch-echart">
    <base-echarts
      :option="option"
      :chartHeight="props.chartHeight"
      :chartWidth="props.chartWidth"
      :style="{ margin: props.chartMargin }"
    />
  </div>
</template>

<script setup lang="ts">
/* 
    xxx-echart 负责将options配置做单独组件的封装
  */
import { computed, defineProps } from "vue"
import baseEcharts from "./Base-echarts-webGL.vue"
import type { EChartsOption } from "echarts"

interface IProps {
  chartHeight?: string
  chartWidth?: string
  chartMargin?: string
}

const props = withDefaults(defineProps<IProps>(), {
  chartHeight: "500px",
  chartWidth: "100%",
  chartMargin: "80px 0 40px"
})

const option = computed<EChartsOption>(() => {
  return {
    //ECharts表格数据

    // backgroundColor: "#000",
    globe: {
      baseTexture: "/chartPhoto-webp/earth.webp",
      heightTexture: "/chartPhoto-webp/bathymetry_bw_composite_4k.webp",
      displacementScale: 0.1,
      shading: "lambert",
      // environment: "/chartPhoto/starfield.jpg",
      light: {
        ambient: {
          intensity: 0.1
        },
        main: {
          intensity: 1.5
        }
      },
      layers: [
        {
          type: "blend",
          blendTo: "emission",
          texture: "/chartPhoto-webp/night.webp"
        },
        {
          type: "overlay",
          texture: "/chartPhoto-webp/clouds.webp",
          shading: "lambert",
          distance: 5
        }
      ]
    },
    series: []
  }
})
</script>

<style lang="less" scoped></style>
